<template>
  <div class="page">
    <Header goback="true" :headerTitle="titleAddress"></Header>
    <div class="content paddingTop">
      <div class="user-name clear draw-bottom">
        <div class="icon-outer-position clear">
          <input
            type="text"
            class="user-in-name user-in-common"
            placeholder="账号"
          />

          <span
            class="icon-user iconfont icon-yonghuguanli_huaban user-icon-common"
          ></span>
        </div>
      </div>
      <div class="user-pad clear user-common draw-bottom">
        <div class="icon-outer-position pad-icon clear">
          <input
            type="text"
            class="user-in-pad user-in-common"
            placeholder="密码"
          />

          <span
            class="iconfont icon-weibiaoti-- icon-pad user-icon-common"
          ></span>
          <div class="showpwd">
            <div :class="{ 'sp-outer': true, 'sp-outer-change': changeSwitch }">
              <span>abc...</span>
              <p
                :class="{ switch: true, 'switch-change': changeSwitch }"
                @click="changeSwitch = !changeSwitch"
              ></p>
            </div>
          </div>
        </div>
      </div>
      <div class="user-code clear user-common draw-bottom">
        <div class="icon-outer-position code-icon clear">
          <input
            type="text"
            class="user-in-pad user-in-common"
            placeholder="验证码"
          />

          <span class="iconfont icon-yanzhengma user-icon-common"></span>
          <div class="imgcode">
            <img src="../../../static/images/qq.png" alt="" />
            <div class="tabs-code">
              <p>看不清</p>
              <p>换一张</p>
            </div>
          </div>
        </div>
      </div>
      <div class="prompt">
        <p>温馨提示：未注册过的账号，登录时将自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
      </div>
      <p class="sub-btn">登录</p>
      <div class="result-outer">
        <router-link to="/forget">
          <span class="result-pad">重置密码</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "Components/header/header.vue";
export default {
  data() {
    return {
      titleAddress: "密码登录",
      changeSwitch: false, //是否隐藏密码
    };
  },
  components: { Header },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
input {
  @include sc(0.6rem, #666);
}
.user-name {
  margin-top: 0.7rem;
}
// 公共样式
.icon-outer-position {
  background: #fff;
  padding: 0.3rem 0.7rem 0.3rem 2rem;
}
.user-in-common {
  width: 100%;
  height: 1.5rem;
  float: left;
}
.user-icon-common {
  float: left;
  margin-left: -100%;
  transform: translateX(-150%);
  line-height: 1.5rem;
}
// 密码输入外部样式
.content .pad-icon {
  padding-right: 5rem;
}
.showpwd {
  float: left;
  margin-right: -2rem;
  transform: translateX(2.3rem);

  // line-height: 1.5rem;
  width: 2rem;
  height: 1.5rem;

  .sp-outer {
    // position: absolute;
    // top: 0;
    // bottom: 0;
    // left: 0;
    // right: 0;
    // margin: auto;
    margin-top: 0.75rem;
    transform: translateY(-50%);
    font-size: 0.4rem;
    width: 2rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    background: #ccc;
    text-align: center;
    position: relative;
    span {
      @include sc(0.4rem, #fff);
    }
    .switch {
      position: absolute;
      top: 0;
      left: -2px;
      margin-top: -0.2rem;
      // transform: translateY(-25%);
      width: 1.1rem;
      height: 1.1rem;
      background: #f1f1f1;
      border: 1px;
      border-radius: 50%;
      transition: all 0.2s;
    }
    .switch-change {
      transform: translateX(1rem);
    }
  }
  .sp-outer-change {
    background: #4cd964;
  }
}
.code-icon {
  padding-right: 6rem;
}
.imgcode {
  float: left;
  margin-right: -5.5rem;
  width: 5.5rem;
  height: 1.5rem;
  display: flex;
  img {
    // width: ;
    height: 100%;
    flex: 3.5rem;
  }
}
.tabs-code {
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  p {
    @include sc(0.4rem, #666);
  }
}
.prompt {
  margin-left: 0.5rem;
  margin-top: 0.3rem;
  p {
    line-height: 0.7rem;
    font-size: 0.4rem;
    @include sc(0.4rem, red);
  }
  p + p {
    margin-top: 0.2rem;
  }
}
.sub-btn {
  margin: 0.3rem 0.5rem;
  padding: 0.5rem 0;
  background: #4cd964;

  @include sc(0.7rem, #fff);
  text-align: center;
  border-radius: 2px;
}
.result-outer {
  text-align: right;
  margin-right: 0.5rem;
  .result-pad {
    @include sc(0.6rem, $blue);
  }
  .result-pad::after {
    content: "?";
  }
}
</style>
